<template>
	<view class="my">
		<view class="header">
			<view class="my-page">
				<!-- <text>我的页面</text> -->
				<image v-if="user_img.length == 0" class="img" src="/static/assets/my-title.png" mode=""></image>
				<image v-else class="img" :src="user_img" mode=""></image>
				<view class="my-sign">
					<uni-section title="输入框示例" type="line" padding>
						<view class="dialog-box">
							<text class="dialog-text">{{ value }}</text>
						</view>
					</uni-section>
				</view>

				<text class="my-name" @click="inputDialogToggle">
					点击编辑个人昵称
					<image class="img" src="../../static/assets/my-edit.png" mode=""></image>
				</text>
			</view>

			<view>
				<!-- 修改个人昵称弹框 -->
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="个人昵称" value="请输入编辑个人昵称" placeholder="请输入内容"
						@confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>

			<view class="middle">
				<ul class="list">
					<li>
						<image class="img" src="../../static/assets/order.png" mode=""></image>
						<text>订单</text>
					</li>
					<li>
						<image class="img" src="../../static/assets/collect.png" mode=""></image>
						<text>收藏</text>
					</li>
					<li>
						<image class="img" src="../../static/assets/address.png" mode=""></image>
						<text>地址</text>
					</li>
					<li>
						<image class="img" src="../../static/assets/coupon.png" mode=""></image>
						<text>优惠券</text>
					</li>
				</ul>
			</view>
		</view>

		<view class="list">
			<navigator url="/pages/info/info">
				<ul>
					<li>
						<view class="box">
							<image class="img" src="../../static/assets/my-account.png" mode=""></image>
							<p>我的资料</p>
						</view>

						<image class="img" src="../../static/assets/my-right.png" mode=""></image>
					</li>
				</ul>
			</navigator>
			<ul>
				<li>
					<view class="box">
						<image class="img" src="../../static/assets/my-tell.png" mode=""></image>
						<p>通告</p>
					</view>
					<image class="img" src="../../static/assets/my-right.png" mode=""></image>
				</li>
			</ul>
			<ul>
				<li>
					<view class="box">
						<image class="img" src="../../static/assets/my-help.png" mode=""></image>
						<p>帮助</p>
					</view>
					<image class="img" src="../../static/assets/my-right.png" mode=""></image>
				</li>
			</ul>
			<ul>
				<li>
					<view class="box">
						<image class="img" src="../../static/assets/my-set.png" mode=""></image>
						<p>设置</p>
					</view>
					<image class="img" src="../../static/assets/my-right.png" mode=""></image>
				</li>
			</ul>
			<ul @click="showMessageFn(user_img.length)">
				<li>
					<view class="box">
						<image class="img" src="../../static/assets/my-exit.png" mode=""></image>
						<p v-if="user_img.length == 0">去登录</p>
						<p v-else>退出</p>
					</view>
					<image class="img" src="../../static/assets/my-right.png" mode=""></image>
				</li>
			</ul>
		</view>
	</view>

</template>


<script>
	import api from '../../api'
	export default {
		data() {
			return {
				// 用户昵称
				value: "昵称",
				// 用户头像
				user_img: ""
				// 用户信息
				// user_arr: [],
			}
		},
		methods: {
			// 弹出修改个人签名
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })

				// setTimeout(() => {
				// 	uni.hideLoading()
				// console.log(val)
				this.value = val
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
				// }, 3000)
			},
			// 弹出提示（模态框）
			showMessageFn(user_img) {
				if(user_img){
					uni.showModal({
						title: '提示',
						content: '您确定要退出登录吗？',
						success: (res) => {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '是否要登录账号？',
						confirmText: "是",
						cancelText: "否",
						success: (res) => {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
				
			},
			// 获取用户信息
			async getUserInfoFn() {
				let token = uni.getStorageSync("AUTOTOKEN");
				// console.log(token);
				if (token) {
					api.getUserInfo({
							token
						})
						.then(
							content => {
								// console.log(content);
								let {
									code,
									result
								} = content;
								if (code == 200) {
									let title_img = api.host + result[0].imgUrl;
									this.user_img = title_img;
									this.value = result[0].nickName
								}
							}
						)
				}
			},
		},
		onLoad() {
			// 初始化
			this.getUserInfoFn()
		},
		// 跳转页面就获取渲染
		onShow() {
			// 初始化
			this.getUserInfoFn()
		}

	}
</script>


<style lang="scss" scoped>
	@import '../../uni.scss';

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	.my {
		width: 100%;

		.header {
			width: 100%;
			position: relative;
			background: $bgRight;

			.my-page {
				text-align: center;
				color: #fff;
				padding: 50rpx 0 100rpx 0;

				.img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					border: 2rpx solid #fff;
					margin-bottom: 10rpx;

				}

				.my-sign {
					padding-bottom: 10rpx;
					font-size: 45rpx
				}

				.my-name {
					font-size: 25rpx;
					color: beige;

					.img {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						border: 0;
					}
				}
			}

			.middle {
				width: 100%;
				position: absolute;
				top: 47%;
				left: 60%;
				transform: translate(-50%, -50%);

				.list {
					width: 550rpx;
					padding: $pad;
					border: 4rpx solid #efefef;
					box-shadow: 2rpx 5rpx 10rpx #ccc;
					position: absolute;
					background: $bgTop;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					li {
						text-align: center;
						color: #fff;
						padding: 20rpx 10rpx;

						// background-color: #fff;
						.img {
							width: 80rpx;
							height: 80rpx;
							display: block;
							margin-bottom: 10rpx;
						}

						text {
							font-size: 25rpx;
						}
					}
				}
			}
		}

		.list {
			width: 600rpx;
			margin: 0 auto;
			margin-top: 150rpx;
			overflow: hidden;

			ul {
				margin-bottom: 40rpx;
				padding: 20rpx 30rpx;
				background-color: #faf9f9;
				border-radius: 15rpx;
				box-shadow: 2rpx 2rpx 10rpx #ccc;

				li {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box {
						.img {
							width: 50rpx;
							height: 50rpx;
							vertical-align: middle;
							margin-right: 30rpx;
						}

						p {
							color: #ff7168;
							display: inline-block;
							vertical-align: middle;
						}
					}

					.img {
						width: 50rpx;
						height: 50rpx;
						vertical-align: middle;
					}
				}
			}
		}

	}
</style>